<!-- src/views/question/QuestionBankList.vue -->
<template>
  <div class="bank-list-container">
    <h2>📚 题库管理</h2>

    <!-- 搜索栏 -->
    <el-input
      v-model="searchSubject"
      placeholder="输入题库名称搜索"
      style="max-width: 300px; margin-bottom: 20px;"
      clearable
      @input="loadBanks"
    >
      <i slot="prefix" class="el-input__icon el-icon-search"></i>
    </el-input>

    <!-- 题库列表 -->
    <el-card v-if="banks.length > 0" shadow="hover">
      <div
        v-for="bank in banks"
        :key="bank.id"
        class="bank-item"
        @click="goToQuestions(bank.subject)"
      >
        <h3>{{ bank.subject }}</h3>
        <p class="time">创建时间：{{ formatTime(bank.createTime) }}</p>
      </div>
    </el-card>

    <el-empty v-else description="暂无题库，请先导入题目" :image-size="100" />
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'QuestionBankList',
  data() {
    return {
      banks: [],
      searchSubject: ''
    };
  },
  created() {
    this.loadBanks();
  },
  methods: {
    async loadBanks() {
      try {

        const res = await axios.get('/api/banks', {
          params: { subject: this.searchSubject },
          headers: {
            Authorization: 'Bearer ' + this.$store.getters.token
          }
        });

        if (res.data.code === 200) {
          this.banks = res.data.data || [];
          console.log('this.banks :>> ', this.banks);
        } else {
          this.$message.error(res.data.message || '加载失败');
        }
      } catch (err) {
        this.$message.error('网络错误，无法加载题库列表');
        console.error(err);
      }
    },

    goToQuestions(subject) {
      console.log('subject :>> ', subject);
      this.$router.push({
        path: '/selectAnswer',
        query: { subject }
      });
    },

    formatTime(time) {
      if (!time) return '未知';
      return new Date(time).toLocaleString('zh-CN');
    }
  }
};
</script>

<style scoped>
.bank-list-container {
  max-width: 900px;
  margin: 40px auto;
  padding: 20px;
}

.bank-item {
  padding: 16px;
  margin-bottom: 12px;
  border-radius: 8px;
  border: 1px solid #ebeef5;
  background-color: #f9f9f9;
  cursor: pointer;
  transition: all 0.3s;
}

.bank-item:hover {
  background-color: #e6f7ff;
  border-color: #91d5ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.bank-item h3 {
  margin: 0 0 8px 0;
  color: #1890ff;
  font-size: 16px;
}

.time {
  margin: 0;
  color: #999;
  font-size: 13px;
}
</style>